
<script>
import TabBar from '../../components/common/tabbar/TabBar'
import TabBarItem from '../../components/common/tabbar/TabBarItem'
import { mapGetters, mapMutations } from 'vuex'
export default {
  name: 'RenderTabBar',
  data () {
    return {
      tabbarContent: [
        {
          path: 'home',
          text: '首页'
        },
        {
          path: 'category',
          text: '分类'
        },
        {
          path: 'cart',
          text: '购物车'
        },
        {
          path: 'mine',
          text: '我的'
        }
      ]
    }
  },
  render (h) {
    return (
      <TabBar >
        {
          this.tabbarContent.map(item => {
            return <TabBarItem path={item.path} id={item.path === 'cart' ? 'buycart' : ''}>
                      <img src={require(`@/assets/img/tabbar/${item.path}.svg`)} slot="normal-icon"/>
                      <img src={require(`@/assets/img/tabbar/${item.path}_active.svg`)} slot="active-icon" />
                      <div slot="text">{item.text}</div>
            </TabBarItem>
          })
        }
        </TabBar >
    )
  },
  methods: {
     _initCartData () {
      this.initCartData()
      this.initUserInfo()
    },
    ...mapMutations({
      initCartData: 'INIT_SHOP_CART',
      initUserInfo: 'INIT_USER_INFO'
    })
  },
  computed: {
    ...mapGetters([
      'userInfo'
    ])
  },
  mounted () {
    this._initCartData()
  }
}

</script>
<style lang='scss' scoped>
@keyframes mymove {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-moz-keyframes mymove {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes mymove {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
@-o-keyframes mymove {
  0% {
    transform: scale(1);
  }
  25% {
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.1);
  }
  75% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}
.moveToCart {
  animation: mymove .5s ease-in-out;
}

</style>
